<template>
  <div class="app-container">
    <!--    <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="ID" width="95">
            <template slot-scope="scope">
              {{ scope.$index }}
            </template>
          </el-table-column>
          <el-table-column label="Title">
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column label="Author" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.author }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Pageviews" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.pageviews }}
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="Status" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="Display_time" width="200">
            <template slot-scope="scope">
              <i class="el-icon-time" />
              <span>{{ scope.row.display_time }}</span>
            </template>
          </el-table-column>
        </el-table>-->
    <el-row :gutter="12" style="margin-bottom: 10px">
      <el-col :span="24">
        <el-card shadow="always">
          <el-form label-width="100px" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="团购类型">
              <el-select>
                <el-option label="全部" value=""/>
                <el-option label="未分类" value=""/>
                <el-option label="家居生活" value=""/>
                <el-option label="数码家电" value=""/>
                <el-option label="美妆个护" value=""/>
                <el-option label="母婴用品" value=""/>
                <el-option label="食品保健" value=""/>
                <el-option label="运动户外" value=""/>
                <el-option label="水果生鲜" value=""/>
                <el-option label="虚拟商品" value=""/>
                <el-option label="服饰鞋包" value=""/>
                <el-option label="内衣配饰" value=""/>
              </el-select>
            </el-form-item>
            <el-form-item label="团购发布时间">
              <div class="block">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </div>
            </el-form-item>
            <br>
            <el-form-item label="团购名称">
              <el-input style="width: 200px"/>
            </el-form-item>
            <el-form-item label="团购结束时间">
              <div class="block">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </div>
            </el-form-item>
            <div style="float: right;margin-right: 150px">
              <el-button type="success" style="margin-left: 10px">查询</el-button>
              <el-button>取消</el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!--团购列表-->
    <el-row :gutter="50" style="margin-bottom: 10px">

      <el-col v-for="(o) in 4" :key="o" :span="8">
        <el-card :body-style="{ padding: '0px' }" style="margin-top: 10px;">
          <el-row>
            <div style="margin: 10px">
              <div style="margin-bottom: 8px">
                <span>标题info</span><br>
              </div>
              <div style="color: red;float: left">
                <span>￥</span> <span>80???</span>
              </div>
              <div style="float: right;color: #5a5e66;font-size: 12px;">创建时间</div>
              <br>
            </div>
          </el-row>
          <el-row gutter="15px">
            <!--图片展示-->
            <el-col v-for="(i) in 3" :key="i" :span="8">
              <img
                style="margin: 5px"
                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                class="image">
            </el-col>
          </el-row>
          <el-row>
            <div class="DataAnalyse_data-list__GOjWI" style="margin: 15px">
              <div class="DataAnalyse_data-item__NbIhG">
                <div class="DataAnalyse_data-item-value__t-Sdv" style="color: rgb(255, 103, 34);">0.00</div>
                <div class="DataAnalyse_data-item-text__XLz4f">实际收入(元)</div>
              </div>
              <div class="DataAnalyse_data-item__NbIhG">
                <div class="DataAnalyse_data-item-value__t-Sdv">0</div>
                <div class="DataAnalyse_data-item-text__XLz4f">已跟团</div>
              </div>
              <div class="DataAnalyse_data-item__NbIhG">
                <div class="DataAnalyse_data-item-value__t-Sdv">0</div>
                <div class="DataAnalyse_data-item-text__XLz4f">已浏览</div>
              </div>
              <div class="DataAnalyse_data-item__NbIhG DataAnalyse_income__wnNdU">团数据详情><i
                data-testid="beast-core-icon-right"
                class="ICN_outerWrapper_15w5x36 ICN_type-right_15w5x36 "
                style="font-size: 10px;"
              />
              </div>

            </div>
          </el-row>
          <div class="Bottom_itemBottom__hyhXk" style="margin: 15px">
            <!--左边状态-->
            <div style="float: left">
              <div
                class="Bottom_groupTag__u-f6M"
                style="color: rgb(156, 156, 156); background: rgba(21, 21, 22, 0.08);margin-bottom: 10px">状态
              </div>
            </div>
            <div
              class="Bottom_itemBottomBtn__4axRg"
              style="width: 150px;float: right;text-align: center">
              <el-button class="button" plain style="margin-left: 10px;padding: 5px">订单管理</el-button>
              <el-button class="button" plain style="margin-left: 10px;padding: 5px">团管理</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 90%;
  display: flex;
  float: left;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.DataAnalyse_data-list__GOjWI {
  align-items: center;
  background: #f8f8f8;
  border-radius: 3px;
  display: flex;
  font-size: 12px;
  height: 64px;
  margin-top: 16px;
  position: relative;
}

.DataAnalyse_data-list__GOjWI .DataAnalyse_data-item__NbIhG {
  display: inline-block;
  flex: 1 1 auto;
  padding: 10px 0;
  position: relative;
  text-align: center;
  width: 25%;
}

.DataAnalyse_data-list__GOjWI .DataAnalyse_income__wnNdU {
  border-left: 1px solid rgba(0, 0, 0, .06);
  color: #58595b;
  cursor: pointer;
}

.Bottom_groupTag__u-f6M {
  background: rgba(21, 21, 22, .08);
  border-radius: 16px;
  color: #9c9c9c;
  font-size: 12px;
  font-weight: 400;
  height: 24px;
  line-height: 24px;
  text-align: center;
  width: 60px;
}

.el-button.is-plain:focus, .el-button.is-plain:hover {
  background: #FFF;
  border-color: #07c160;
  color: #07c160;
}

</style>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    }
  }
}
</script>
